<template>
	<!-- 循环 -->
	<view class="circulate">
		<!-- 选择题循环 -->
		<view class="questionSelect">
			<!-- 输入一、选择题 -->
			<view class="boxType" >
				{{type[0]}}
			</view>
			<view 
			style="display: flex; 
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
				<view v-for="count in Data[0].count" :key="count.id"  >
          <!-- 通过传来的题目状态选择样式（class），如果状态为0，显示白色按钮 -->
          <!-- 如果状态为1，显示蓝色按钮 -->
					<button v-bind:class="[Data[0].status[count-1]===0?'buttonUnfinished':'buttonFinished']" class="button-span"
					type="default"
					@click="check(count-1)">
					{{count}}
					</button>
				</view>
		  </view>
		</view>
    <!-- 判断题循环 -->
    <view class="questionFill">
      <!-- 输入二、判断题 -->
      <view class="boxType" >
        {{type[1]}}
      </view>
      <view
          style="display: flex;
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
        <view v-for="count in Data[1].count" :key="count.id"  >
          <!-- 通过传来的题目状态选择样式（class），如果状态为0，显示白色按钮 -->
          <!-- 如果状态为1，显示蓝色按钮 -->
          <button class="button-span" v-bind:class="[Data[1].status[count-1]===0?'buttonUnfinished':'buttonFinished']"
                  type="default"
                  @click="check(count+Data[0].count-1)">
            {{count+Data[0].count}}
          </button>
        </view>
      </view>
    </view>
		<!-- 填空题循环 -->
		<view class="questionFill">
			<!-- 输入三、填空题 -->
			<view class="boxType" >
				{{type[2]}}
			</view>
			<view 
			style="display: flex; 
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
				<view v-for="count in Data[2].count" :key="count.id"  >
          <!-- 通过传来的题目状态选择样式（class），如果状态为0，显示白色按钮 -->
          <!-- 如果状态为1，显示蓝色按钮 -->
					<button class="button-span" v-bind:class="[Data[2].status[count-1]===0?'buttonUnfinished':'buttonFinished']"
					type="default"
					@click="check(count+Data[0].count+Data[1].count-1)">
						{{count+Data[0].count+Data[1].count}}
					</button>
				</view>
			</view>
		</view>
		<!-- 简答题题循环 -->
		<view class="questionAnswer">
			<!-- 输入四、简答题题 -->
			<view class="boxType" >
				{{type[3]}}
			</view>
			<view 
			style="display: flex; 
			<!-- align-items: center; -->
			justify-content: center;
			flex-wrap: wrap;">
				<view v-for="count in Data[3].count" :key="count.id"  >
					<!-- 通过传来的题目状态选择样式（class），如果状态为0，显示白色按钮 -->
					<!-- 如果状态为1，显示蓝色按钮 -->
					<button class="button-span" v-bind:class="[Data[3].status[count-1]===0?'buttonUnfinished':'buttonFinished']"
					type="default"
					@click="check(count+Data[0].count+Data[1].count+Data[2].count-1)">
						{{count+Data[0].count+Data[1].count+Data[2].count}}
					</button>
				</view>
		</view>
		</view>
		<!-- 综合题 -->
<!--		<view class="questionComprehensive">-->
<!--			&lt;!&ndash; 输入四、综合体 &ndash;&gt;-->
<!--			<view class="boxType" >-->
<!--				{{type[3]}}-->
<!--			</view>-->
<!--			<view -->
<!--			style="display: flex; -->
<!--			&lt;!&ndash; align-items: center; &ndash;&gt;-->
<!--			justify-content: center;-->
<!--			flex-wrap: wrap;">-->
<!--			-->
<!--				<view v-for="count in Data[3].count" :key="count.id"  >-->
<!--					&lt;!&ndash; 通过传来的题目状态选择样式（class），如果状态为0，显示红色按钮 &ndash;&gt;-->
<!--					&lt;!&ndash; 如果状态为1，显示红色按钮。如果状态为2，显示蓝色按钮 &ndash;&gt;-->
<!--					<button class="button-span" v-bind:class="statusText[Data[3].status[count-1]]" -->
<!--					type="default"-->
<!--					@click="check(count+Data[0].count+Data[1].count+Data[2].count-1)">-->
<!--						{{count+Data[0].count+Data[1].count+Data[2].count}}-->
<!--					</button>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->
	</view>
</template>

<script>
	export default{
    emits:['pageChange'],
		data(){
			return{
        questions:[],
				type:
            ["一、选择题","二、判断题","三、填空题","四、简答题"],
				questionPaper:{           //页面根据status来选择性的渲染选项按钮样式
						sumScore:0
					},
				Data:[
						{
							count:0,
							status:[]
						},
						{
							count:0,
							status:[]
						},
						{
							count:0,
							status:[]
						},
						{
							count:0,
							status:[]
						}
					],
			}
		},
		created(){
      this.getMsg();
      //this.setMsg();

		},
		methods:{
			getMsg(){
        let i;
        this.questions = this.$store.state.questions;
				console.log("getMsg.questions",this.questions);
				if (this.Data[0].count===0&&this.Data[2].count===0&&this.Data[1].count===0&&this.Data[3].count===0){
					for (i = 0; i<this.questions.length; i++){
						if (this.questions[i].type==="选择题"){
							this.Data[0].count++;
							if (this.questions[i].answer.includes("")===true)         //根据questuion中answer中是否有数据更新status的值
								this.Data[0].status.push(0);
							else
								this.Data[0].status.push(1);
						}
						else if(this.questions[i].type==="判断题"){
							this.Data[1].count++;
							if (this.questions[i].answer.includes("")===true)
								this.Data[1].status.push(0);
							else
								this.Data[1].status.push(1);
						}
						else if(this.questions[i].type==="填空题"){
							this.Data[2].count++;
							if (this.questions[i].answer.includes("")===true)
								this.Data[2].status.push(0);
							else
								this.Data[2].status.push(1);
						}
						else if(this.questions[i].type==="简答题"){
							this.Data[3].count++;
							if (this.questions[i].answer.includes("")===true)
								this.Data[3].status.push(0);
							else
								this.Data[3].status.push(1);
						}
					}
          console.log("组件内的初始化的Data",this.Data)
				}
			 },
			// setMsg(){
			// 	//根据已写的题目变化颜色
			// 	this.questions=this.$store.state.questions;
			// 	//console.log("setMsg.Data",this.Data);
			// 	console.log("setMsg.questions",this.questions);
      //   let c = 0;
      //   for (let i=0; i<this.questions.length;){
			// 		for (let j=0; j<this.Data[c].count; j++,i++){
			// 			if (this.questions[i].answer.includes("")===false)
			// 				this.Data[c].status[j]=1;
			// 		}
			// 		c++;
			// 	}
			// 	console.log("setMsg22.Data",this.Data);
			// },
			check(cnt){   //子组件向父组件传值，该值表示进度条下标信息
        this.$emit('pageChange',cnt)
			}
		}
	}
</script>

<style>
	.boxType{
		font-size: 36rpx;
	}
	.buttonUnfinished{
		border-radius: 30rpx;
		height: 60rpx;
	    width: 60rpx;
		margin-left: 15rpx;
		margin-bottom: 15rpx;
		line-height: 60rpx;
		background-color: white;
		color: black;
		padding: 0;
	}
	.buttonFinished{
		border-radius: 30rpx;
		height: 60rpx;
	    width: 60rpx;
		margin-left: 15rpx;
		margin-bottom: 15rpx;
		line-height: 60rpx;
		background-color: #3498DB;
		color: #F8F8F8;
		padding: 0;
	}
	/* .questionSelect{
		margin-top: 30rpx;
	} */
	.questionFill{
		margin-top: 30rpx;
	}
	.questionAnswer{
		margin-top: 30rpx;
	}
	.questionComprehensive{
		margin-top: 30rpx;
	}
  .questionJudge{
    margin-top: 30rpx;
  }
</style>
